<template>
	<view>
		<image src="/static/common/bg1.png" class="pagebg1" mode=""></image>
		<u-navbar :safeAreaInsetTop="true" leftIcon=" " :autoBack="true" :bgColor="'rgba(255,255,255,0)'"
			placeholder>
			<view class="searchbox" slot="center">
				<image src="/static/home/sousuo.png" class="searchbox__icon" mode=""></image>
				<input type="text" placeholder="搜索关键词" class="searchbox__inp" v-model="keyword"/>
				<view class="searchbox__btn" @click="search">
					搜索
				</view>
			</view>
		</u-navbar>
		<view class="tab">
			<u-tabs :list="list4" lineWidth="38rpx" lineColor="#E3432D" lineHeight='9rpx' @click="chick"
				:current="current" :activeStyle="{
			            color: '#E3432D',
			            fontWeight: 'bold',
			            transform: 'scale(1.05)'
			        }" :inactiveStyle="{
			            color: '#101010',
			            transform: 'scale(1)'
			        }" itemStyle="padding-left: 28rpx; padding-right: 28rpx; height: 58rpx;font-size:31rpx;">
				<!-- 	<view slot="right" style="padding-right: 30rpx;padding-left: 10rpx;" @tap="$u.toast('插槽被点击')">
					<u-icon name="list" color="#101010" size="40rpx" bold></u-icon>
				</view> -->
			</u-tabs>
		</view>
		<scroll-view scroll-y="true" style="height: calc(100vh - 150rpx);">
			<view class="u-flex u-flex-y-center u-flex-between u-flex-wrap" style="padding: 0 20rpx;">
				<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="暂无商品"
					v-if="goodsList.length==0" style="margin: 0 auto;margin-bottom: 30rpx;">
				</u-empty>
				<proitem v-for="(item,index) in goodsList" :key="index" :info="item"></proitem>
			</view>
		</scroll-view>
		
	</view>
</template>

<script>
	import {
		getType,
		getGoods,
	} from "@/request/api/goods.js"
	export default {
		data() {
			return {
				list4: [],
				current: 0,
				keyword:"",
				goodsList: [],
			}
		},
		onLoad(opt) {
			this.current=opt.current;
			this.keyword=opt.keyword;
			getType().then(res => {
				this.list4 = res.data;
				this.getList()
			})
		},
		methods: {
			chick(e) {
				if (this.current == e.index) return;
				this.current = e.index;
				this.getList()
			},
			search(){
				if(this.keyword){
					getGoods({
						type_id: this.list4[this.current].id,
						keyword:this.keyword
					}).then(res => {
						this.goodsList = res.data;
					})
				}else{
					getGoods({
						type_id: this.list4[this.current].id
					}).then(res => {
						this.goodsList = res.data;
					})
				}
			},
			getList() {
				this.goodsList = [];
				getGoods({
					type_id: this.list4[this.current].id,
					keyword:this.keyword
				}).then(res => {
					this.goodsList = res.data;
				})
			}
		}
	}
</script>

<style lang="scss">
	.tabs {
		display: flex;

		.tab {
			background: linear-gradient(to bottom, #6ea1ff, #fff, #fff, #fff, #fff);
			border-radius: 30rpx;
			padding: 10rpx;
		}

		.tab1 {
			background: linear-gradient(to bottom, #C5EDD7, #fff, #fff, #fff, #fff);
		}
	}

	.searchbox {
		width: 690rpx;
		height: 73rpx;
		background: #FEFEFE;
		border-radius: 37rpx 37rpx 37rpx 37rpx;
		display: flex;
		align-items: center;

		&__icon {
			width: 32rpx;
			height: 32rpx;
			margin: 0 10rpx 0 38rpx;
		}

		&__inp {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333;
			flex: 1;
		}

		&__btn {
			width: 118rpx;
			height: 64rpx;
			background: #E3432D;
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFD;
			margin-right: 4rpx;
		}
	}

	.tab {
		padding: 10rpx 0;
	}

	.con {
		padding: 10rpx 30rpx 0;

		.t {
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			margin-top: 35rpx;

			&__i {}

			&__icon {
				margin-bottom: calc(11rpx - 4px);
			}

			&__text {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 25rpx;
				color: #000000;
				line-height: 25rpx;
			}
		}
	}

	.xians {
		margin-top: 54rpx;
		margin-bottom: 24rpx;
	}
</style>